<template>
    <el-dialog
        title="配置年费"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="450px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="isAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
            >
            <div style="margin: 15px 0"></div>
            <el-checkbox-group v-model="checkArr">
                <el-checkbox
                    class="items"
                    v-for="(item, index) in data"
                    :label="item.vipServiceCode"
                    :key="index"
                >
                    <div class="oe">
                        {{ item.vipServiceName }}
                    </div>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>

export default {
    props: {
        value: Boolean,
        currRow: Object
    },

    data () {
        return {
            isAll: false,
            checkAll: false,
            allCheckArr: [],
            isIndeterminate: false,
            checkArr: [],
            loading: false,
            showValue: false,
            data: [],
            defaultProps: {
                label: 'vipServiceName',
                id: 'vipServiceCode'
            }
        }
    },
    watch: {
        value (val) {
            this.showValue = val
            if (val) {
                this.companyVipServices()
            }
        },
        showValue (val) {
            this.$emit('update:value', val)
        },
        checkArr (val) {
            if (val.length === this.allCheckArr.length && val.length > 0) {
                this.isAll = true
                this.isIndeterminate = false
            } else if (val.length === 0) {
                this.isAll = false
                this.isIndeterminate = false
            } else {
                this.isIndeterminate = true
                this.isAll = false
            }
        }
    },
    methods: {
        handleCheckAllChange (val) {
            this.checkArr = val ? this.allCheckArr : []
            this.isIndeterminate = false
        },
        async companyVipServices () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/companyVipServices', {
                data: {
                    agentId: this.currRow.agentId,
                    companyCode: this.currRow.companyCode,
                    addServiceCode: this.currRow.addServiceCode
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.data = response.data.list
                this.checkArr = response.data.vipServiceCodes
                this.allCheckArr = []
                this.data.forEach(item => {
                    this.allCheckArr.push(item.vipServiceCode)
                })
            }
        },
        // 清空数据
        clearData () {
            this.data = []
            this.checkArr = []
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        async save () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/updateCompanyVipService', {
                data: {
                    agentId: this.currRow.agentId,
                    companyCode: this.currRow.companyCode,
                    addServiceCode: this.currRow.addServiceCode,
                    vipServiceCodes: this.checkArr
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.$message({
                    showClose: true,
                    message: '配置成功',
                    type: 'success'
                })
                this.$emit('getList')
                this.clearData()
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap
    height: 400px
    overflow: auto

.items
    width: 80%

.tip
    color: red
    margin-bottom: 20px
</style>